<template>
    <div class="login-log-container">
        <el-card class="box-card">
            <div slot="header">
                <!-- 导航 -->
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>登录日志</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 导航 -->
            </div>
            <!-- 查询表单 -->
            <el-form ref="form" class="searcher-form" :model="form" label-width="80px" size="mini">

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                </el-form-item>
            </el-form>
            <!-- 查询表单 -->
        </el-card>

        <el-card class="box-card">
            <div slot="header" class="data-header">
                <span>筛选出{{totalCount}}条符合条件的数据</span>
            </div>
            <!-- 数据表格 -->
            <el-table
                v-loading="loading"
                class="data-form"
                :data="loginLogList"
                style="width: 100%">
                <el-table-column
                    width="100"
                    prop="id"
                    label="ID" align="center">
                </el-table-column>
                <el-table-column
                    label="用户" align="center">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.username}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="登录时间" align="center">
                    <template slot-scope="scope">
                        {{scope.row.loginDate | dateFormatAll}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="ip"
                    label="登录IP" align="center">
                </el-table-column>
                <el-table-column
                    prop="location"
                    label="登录地点" align="center">
                </el-table-column>
                <el-table-column
                    prop="os"
                    label="登录系统" align="center">
                </el-table-column>
                <el-table-column
                    prop="browser"
                    label="浏览器" align="center">
                </el-table-column>
            </el-table>
            <!-- 数据表格 -->
            <!-- 分页 -->
            <el-pagination
                background
                layout="prev, pager, next, sizes, total"
                @current-change="onChangePage"
                @size-change="onChangePageSize"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pageSize"
                :total="totalCount">
            </el-pagination>
            <!-- 分页 -->
        </el-card>

    </div>
</template>

<script>
    import {loadLoginLogData} from "../../api/log";

    export default {
        name: "LoginLog",
        data() {
            return {
                form: {

                },
                loginLogList: [],// 数据集合
                page: 1,         // 页码
                pageSize: 10,    // 每页显示多少数据
                totalCount: 0,   // 总数据个数
                loading: false   // 是否正在加载数据
            }
        },
        created() {
            this.loadTableData()
        },
        methods: {
            onSearch() {

            },
            loadTableData(){
                this.loading = true     // 加载数据中
                loadLoginLogData({

                }, this.page, this.pageSize).then(res => {
                    const data = res.data.data
                    this.loginLogList = data.list
                    this.totalCount = data.total
                })
                this.loading = false     // 加载数据完毕
            },
            onChangePage(page) {
                this.page = page
                this.loadTableData()
            },
            onChangePageSize(pageSize) {
                this.pageSize = pageSize
                this.loadTableData()
            }
        }
    }
</script>

<style scoped>

</style>
